<template>
	<view class="fui-wrap" :style="`padding-bottom:${safebottom}rpx;`">
		<fui-sticky>
			<picker @change="changeParking" mode="selector" :range="parkings" range-key="title">
				<view class="parkinfo">
					<fui-icon :size="30" color="#000" name="location-fill"></fui-icon>
					<fui-text :text="parking.title" color="#000" block :size="28" style="position: relative;top:-4rpx;margin:0 6rpx"></fui-text>
					<fui-icon :size="30" color="#000" name="arrowright"></fui-icon>
				</view>
			</picker>
		</fui-sticky>
		<fui-card :src="`${baseUrl}assets/img/miniapp/changyong.png`" :width="40" :height="40" title="常用功能" :margin="['20rpx','18rpx','0','18rpx']">
			<view class="bar">
				<view class="item" v-for="(item,index) in bar" :key="index" @click="goPage(item)">
					<view class="imagebox">
						<image :src="`${baseUrl}assets/img/miniapp/${item.icon}`" :style="`width: ${item.width || 60}rpx;height: ${item.height || 60}rpx;`" mode="widthFix"></image>
					</view>
					<fui-text :text="item.title" color="#000" :size="24"></fui-text>
					<view class="tips">
						<fui-badge v-if="item.tips" type="danger" :value="item.tips"></fui-badge>
					</view>
				</view>
			</view>
		</fui-card>
		<fui-card :margin="['20rpx','18rpx','0','18rpx']">
			<fui-tabs selectedColor="#13a1ff" sliderBackground="#13a1ff" :size="30" :current="current" :tabs="tabs" :center="true" :scale="1" :short="false" @change="changeTab"></fui-tabs>
			<view class="txgird" v-if="current===0 && records">
				<view class="charts-box">
					<qiun-data-charts v-if="chartData.records" type="column" :opts="opts.records" :chartData="chartData.records"></qiun-data-charts>
				</view>
				<fui-grid :columns="4">
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="records.parking_space_total" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="总车位" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="records.parking_space_active" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="在场车辆" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="records.parking_space_last" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="剩余车位" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="records.provisional" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="临停车" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="cars.monthly" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="月租车" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="cars.stored" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="储值车" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="cars.member" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="会员车" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="cars.vip" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="VIP" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
				</fui-grid>
			</view>
			<view class="txgird-auth" v-if="current===0 && !tabs_auth[0]">
				<fui-result type="fail" descr="没有查看权限!"></fui-result>
			</view>
			<view class="txgird" v-if="current===1 && pay">
				<fui-data-tag :padding="['16rpx','22rpx']" :gap="6" :width="0" activeColor="#13a1ff" borderColor="#13a1ff" mark markColor="#13a1ff" :options="dateOption" @change="tagItemClick" :modelValue="dateActive"></fui-data-tag>
				<fui-white-space></fui-white-space>
				<fui-grid :columns="3">
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(pay.total)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="交易总额" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(pay.provisional)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="临停缴费" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(pay.parking_monthly)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="月租缴费" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(pay.parking_stored)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="储值缴费" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(pay.merch_recharge)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="商户充值" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(pay.refund_price)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="退款金额" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(pay.handling_fees)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="手续费" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(pay.settlement)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="结算金额" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(pay.underline)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="线下缴费" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
				</fui-grid>
			</view>
			<view class="txgird-auth" v-if="current===1 && !tabs_auth[1]">
				<fui-result type="fail" descr="没有查看权限!"></fui-result>
			</view>
			<view class="txgird" v-if="current===2 && merch">
				<fui-grid :columns="3">
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(merch.total)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="商户总数" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(merch.total_coupon_type)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="停车券类型" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(merch.total_coupon)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="发券总数" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(merch.total_coupon_active)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="使用中的券" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<fui-text :text="parseNumber(merch.total_activities_fee)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							<fui-text text="减免金额" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<view class="twai">
								<fui-text :text="formatDuration(merch.total_activities_time,'hours')" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							</view>
							<fui-text text="减免时间" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<view class="twai">
								<fui-text :text="parseNumber(merch.balance_fee)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							</view>
							<fui-text text="商户余额-金额" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<view class="twai">
								<fui-text :text="parseNumber(merch.balance_time)+'分'" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							</view>
							<fui-text text="商户余额-时间" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
					<fui-grid-item>
						<view class="fui-grid__cell">
							<view class="twai">
								<fui-text :text="parseNumber(merch.balance_bill)" color="#12a744" :size="30" :fontWeight="800"></fui-text>
							</view>
							<fui-text text="商户账单" color="#000" :size="28"></fui-text>
						</view>
					</fui-grid-item>
				</fui-grid>
			</view>
			<view class="txgird-auth" v-if="current===2 && !tabs_auth[2]">
				<fui-result type="fail" descr="没有查看权限!"></fui-result>
			</view>
		</fui-card>
		<toolbar :current="0"></toolbar>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import toolbar from './components/toolbar.vue';
	import {parseNumber,formatDuration} from '@/utils/util.js';
	import merchBalance from '@/components/common/merch-balance.vue';
	export default {
		components:{
			toolbar:toolbar,
			merchBalance:merchBalance
		},
		data() {
			return {
				baseUrl:baseUrl,
				parking:{},
				parkings:[],
				records:'',
				cars:'',
				pay:'',
				merch:'',
				tabs:['车场情况','收入情况','商户情况'],
				tabs_auth:[1,1,1],
				current:0,
				bar:'',
				dateOption: ['当日', '昨日', '本周', '当月', '上月', '今年'],
				dateActive:['当日'],
				safebottom:0,
				tagWidth:0,
				chartData: {records:''},
				opts:{
					records:{
						color: ["#1890FF","#91CB74"],
						padding: [15,15,0,5],
						enableScroll: false,
						legend: {},
						xAxis: {
						  disableGrid: true
						},
						yAxis: {
						  gridType:'dash',
						  data: [
							{
							  min: 0
							}
						  ]
						},
						extra: {
						  column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						  }
						}
					},
				}
			}
		},
		onLoad() {
			this.getParkingInfo();
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.tagWidth=parseInt((info.screenWidth-110)*2/6);
				that.safebottom=info.safeAreaInsets.bottom*2+100+30;
			  }
			});
		},
		methods: {
			...methods,
			parseNumber,
			formatDuration,
			getRecords:function(){
				this.$get('parking/index/records').then(res=>{
					this.records=res.records;
					this.cars=res.cars;
					this.chartData.records=res.charts;
				}).catch(e=>{
					this.tabs_auth[0]=0;
				});
			},
			getPay:function(){
				this.$get('parking/index/pay',{time:this.dateActive[0]}).then(res=>{
					this.pay=res;
				}).catch(e=>{
					this.tabs_auth[1]=0;
				});
			},
			getMerchant:function(){
				this.$get('parking/index/merchant').then(res=>{
					this.merch=res;
				}).catch(e=>{
					this.tabs_auth[2]=0;
				});
			},
			goPage:function(item){
				let menus=uni.getStorageSync('clickMenu') || [];
				let b=false;
				for(let i=0;i<menus.length;i++){
					if(menus[i].page==item.page){
						menus[i].click++;
						b=true;
					}
				}
				if(!b){
					item.click=1;
					menus.push(item);
				}
				uni.setStorageSync('clickMenu',menus);
				this.$navigateTo(item.page);
			},
			getMenuInfo:function(){
				let dt=[
					{
						title:'车辆查询',
						page:'parking/plate?type=search',
						icon:'search.png',
						width:50,
						height:50,
						click:1
					},
					{
						title:'手动入场',
						page:'parking/records/entry',
						icon:'pentry.png',
						width:50,
						height:50,
						click:1
					},
					{
						title:'手动出场',
						page:'parking/records/exit',
						icon:'rexit.png',
						width:50,
						height:50,
						click:1
					},
					{
						title:'出入记录',
						page:'parking/records/list',
						icon:'jilu.png',
						width:50,
						height:50,
						click:1
					},
					{
						title:'月租车',
						page:'parking/cars/list?type=monthly',
						icon:'rmonthy.png',
						width:54,
						height:54,
						click:1
					}
				];
				let clickmenu=uni.getStorageSync('clickMenu') || [];
				clickmenu.sort((a, b) => b.click - a.click);
				clickmenu = clickmenu.length >= 5 ? clickmenu.slice(0, 5) : clickmenu;
				dt.splice(0,clickmenu.length);
				for(let i=0;i<clickmenu.length;i++){
					dt.push(clickmenu[i]);
				}
				this.bar=dt;
			},
			getParkingInfo:function(){
				this.$get('parking/index/info').then(res=>{
					this.parking=res.parking;
					if(res.parkings.length>0){
						this.parkings=res.parkings;
					}else{
						this.parkings=[res.parking];
					}
					uni.setStorageSync('parking',res.parking);
					this.getRecords();
					this.getPay();
					this.getMerchant();
					this.getMenuInfo();
				});
			},
			changeParking:function(e){
				let index=e.detail.value;
				let id=this.parkings[index].id;
				if(id==this.parking.id){
					return;
				}
				this.$post('parking/common/change-parking',{parking_id:id},true,true).then(res=>{
					this.getParkingInfo();
				});
			},
			changeTab:function(e){
				this.current=e.index;		
			},
			tagItemClick:function(e){
				this.dateActive=[e.detail.value];
				this.getPay();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-wrap{
		
	}
	.twai{
		text-align: center;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.parkinfo{
		background-color: #fff;
		height: 100rpx;
		padding:0 30rpx;
		padding-top: 80rpx;
		display: flex;
		align-items: center;
	}
	.charts-box{
		height: 560rpx;
		margin:0 -34rpx;
		margin-bottom: 30rpx;
	}
	.bar{
		display: flex;
		align-items: center;
		padding-top: 28rpx;
		flex-wrap: wrap;
		.item{
			width: 20%;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			.imagebox{
				height: 60rpx;
				width: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.tips{
				position: absolute;
				right: 30rpx;
				top: -10rpx;
			}
		}
	}
	.txgird{
		padding:40rpx;
	}
	.txgird-auth{
		padding:40rpx;
		padding-bottom: 100rpx;
	}
	.fui-grid__cell{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.dateinfo{
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.message{
		padding: 20rpx;
	}
</style>